<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>easyui_2</title>
    <link rel="stylesheet" type="text/css" href="static/easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="static/easyui/themes/icon.css"/>
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>

</head>
<body>
    <div style="margin:20px 0;"></div>
    <table id="db" title="大头" class="easyui-datagrid" style="width: 400px;height:300px;"
           data-options="singleSelect:true,collapsible:true">
        <thead>
            <tr>
                <th data-options="field:'mark',width:60">编号</th>
                <th data-options="field:'bookName',width:100">书名</th>
                <th data-options="field:'author',width:80">作者</th>
                <th data-options="field:'price',width:80">售价</th>
                <th data-options="field:'soldOut',width:80">销量</th>
            </tr>
        </thead>
    </table>
    <input class="easyui-textbox" data-options="onChange:ifYouHaveChanged"/>
    <br/>
    <input id="cb" />
    <div id="sp">
        <div style="padding: 10px;">
            <input type="radio" name="lang" value="01"/><span>中国</span><br/>
            <input type="radio" name="lang" value="02"/><span>米国</span><br/>
            <input type="radio" name="lang" value="03"/><span>俄罗斯</span><br/>
            <input type="radio" name="lang" value="04"/><span>英国</span><br/>
            <input type="radio" name="lang" value="05"/><span>法国</span><br/>
            <input type="radio" name="lang" value="06"/><span>德国</span><br/>
            <input type="radio" name="lang" value="07"/><span>瑞典</span><br/>
        </div>
    </div>
    <script>
        $("#cb").combo({
            required:true,
            multiple:false
        });
        function ifYouHaveChanged(newValue,oldValue) {
            alert(newValue);
        }
        function onSelectRow(index,row) {
            alert("好多鱼"+row.author);
        }
        $(function () {
            var json_data=[
                {mark:'1001',bookName:'大秦帝国',author:'孙皓晖',price:'465￥',soldOut:'300'},
                {mark:'1001',bookName:'冰与火之歌',author:'乔治·HR·马丁',price:'300￥',soldOut:'400'},
                {mark:'1001',bookName:'三体',author:'刘慈欣',price:'85￥',soldOut:'3000'},
                {mark:'1001',bookName:'无人生还',author:'阿加莎·克里斯蒂',price:'25￥',soldOut:'100000000'},
            ];
            $("#db").datagrid({
                data:json_data,
                onSelect:onSelectRow
            });
            $("#sp").appendTo($("#cb").combo("panel"));
            $("#sp input").click(function () {
                var val=$(this).val();
                var text=$(this).next("span").text();
                $("#cb").combo("setValue",val).combo("setText",text).combo("hidePanel");
            });
        });
    </script>
</body>
</html>